<template>
  <div class="login">
    <Header title="登录"></Header>
    <div class="login-main">
      <Field v-model="account" placeholder="请输入手机号码或用户名" />
      <Field v-model="password" type="password" showPassword placeholder="请输入密码" />
      <Button @click="submit" class="login-btn" type="primary" block round>登录</Button>
      <Button type="primary" outline to="/register" block round>注册账号</Button>
      <router-link to="/forget-password" class="forget-password">
        忘记密码?
      </router-link>
      <Divider class="title" color="primary" orientation="center">第三方登录</Divider>
      <ul class="other">
        <li>
          <i class="icon-qq icon"></i>
          <span>QQ登录</span>
        </li>
        <li>
          <i class="icon-wechat icon"></i>
          <span>微信登录</span>
        </li>
        <li>
          <i class="icon-weibo icon"></i>
          <span>微博登录</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { isEmpty } from 'lodash'
import Header from "../components/Header.vue";
import Field from "../components/Field.vue";
import Button from "../components/Button.vue";
import Divider from "../components/Divider.vue";
export default {
  components: {
    Header,
    Field,
    Button,
    Divider
  },
  data() {
    return {
      account: "",
      password: ""
    };
  },
  methods: {
    validate(){
      if ( isEmpty(this.account) ){
        return '账号不能为空' 
      }
      if ( isEmpty(this.password) ){
        return '密码不能为空'
      }
    },
    submit(){
      const err = this.validate()
      if (err) {
        return alert(err)
      }
      this.$store.dispatch('login', {
        account: this.account,
        password: this.password
      }).then(()=>{
        alert('登录成功')
        const {redirect} = this.$route.query
        if (redirect) {
          this.$router.push(redirect);
        }else{
          this.$router.push('/')
        }
      }).catch(e=>{
        console.log(e)
      })
    }
  }
};
</script>

